<template>
  <div class="container">
    <div class="table-area">
      <div class="tab-type">主要指数</div>
      <div class="tab-type">行业指数</div>
    </div>
    <div class="table-area">
      <div class="tab" :class="{'cur': tabIndex == 1}" @click="tabSelect(1)">涨跌幅</div>
      <div class="tab" :class="{'cur': tabIndex == 2}" @click="tabSelect(2)">估值</div>
      <div class="tab" :class="{'cur': tabIndex == 3}" @click="tabSelect(3)">涨跌幅</div>
      <div class="tab" :class="{'cur': tabIndex == 4}" @click="tabSelect(4)">估值</div>
    </div>
    <div class="tab-content">      
      <!-- 理财报告 -->
      <div class="info-list" v-show="tabIndex == 1">
        <div class="table-area">
          <div class="table">
            <div class="tr title">
              <div class="item">指数代码</div>
              <div class="item">指数名称</div>
              <div class="item" @click="orderTitle('today')">最新日</div>
              <div class="item" @click="orderTitle('last_week')">近一周</div>
              <div class="item" @click="orderTitle('last_month')">近一月</div>
              <div class="item" @click="orderTitle('last_three_month')">近三月</div>
              <div class="item" @click="orderTitle('year_come')">今年以来</div>
              <div class="item" @click="orderTitle('one_nine')">2019</div>
              <div class="item" @click="orderTitle('one_eight')">2018</div>
            </div>
            <div class="tr" v-for="item in data1" :key="item">
              <div class="item">{{item.code}}</div>
              <div class="item">{{item.name}}</div>
              <div :class="item.today > 0? 'redItem': item.today ==0 ? 'item': 'greenItem'">{{item.today}}%</div>
              <div :class="item.last_week > 0? 'redItem': item.today ==0 ? 'item': 'greenItem'">{{item.last_week}}%</div>
              <div :class="item.last_month > 0? 'redItem': item.today ==0 ? 'item': 'greenItem'">{{item.last_month}}%</div>
              <div :class="item.last_three_month > 0? 'redItem': item.today ==0 ? 'item': 'greenItem'">{{item.last_three_month}}%</div>
              <div :class="item.year_come > 0? 'redItem': item.today ==0 ? 'item': 'greenItem'">{{item.year_come}}%</div>
              <div :class="item.one_nine > 0? 'redItem': item.today ==0 ? 'item': 'greenItem'">{{item.one_nine}}%</div>
              <div :class="item.one_eight > 0? 'redItem': item.today ==0 ? 'item': 'greenItem'">{{item.one_eight}}%</div>
            </div>
          </div>
        </div>
      </div>

      <div class="info-list" v-show="tabIndex == 2">
        <div class="table-area">
          <div class="table">
            <div class="tr title">
              <div class="item">指数代码</div>
              <div class="item">指数名称</div>
              <div class="item" @click="orderTitle('pe')">PE</div>
              <div class="item" @click="orderTitle('pe_point')">分数位</div>
              <div class="item" @click="orderTitle('pb')">PB</div>
              <div class="item" @click="orderTitle('pb_point')">分数位</div>
              <div class="item" @click="orderTitle('gu_xi_lv')">股息率</div>
              <div class="item" @click="orderTitle('roe')">ROE</div>
              <div class="item" @click="orderTitle('epsg')">EpsG%</div>
            </div>
            <div class="tr" v-for="item in data2" :key="item">
              <div class="item">{{item.code}}</div>
              <div class="item">{{item.name}}</div>
              <div :class="item.pe > 0? 'redItem': item.today ==0 ? 'item': 'greenItem'">{{item.pe}}</div>
              <div :class="item.pe_point > 0? 'redItem': item.today ==0 ? 'item': 'greenItem'">{{item.pe_point}}%</div>
              <div :class="item.pb > 0? 'redItem': item.today ==0 ? 'item': 'greenItem'">{{item.pb}}</div>
              <div :class="item.pb_point > 0? 'redItem': item.today ==0 ? 'item': 'greenItem'">{{item.pb_point}}%</div>
              <div :class="item.gu_xi_lv > 0? 'redItem': item.today ==0 ? 'item': 'greenItem'">{{item.gu_xi_lv}}%</div>
              <div :class="item.roe > 0? 'redItem': item.today ==0 ? 'item': 'greenItem'">{{item.roe}}%</div>
              <div :class="item.epsg > 0? 'redItem': item.today ==0 ? 'item': 'greenItem'">{{item.epsg}}%</div>
            </div>
          </div>
        </div>
      </div>
      
      <!-- 新手引导 -->
      <div class="info-list" v-show="tabIndex == 3">
        <div class="table-area">
          <div class="table">
            <div class="tr title">
              <div class="item">指数代码</div>
              <div class="item">指数名称</div>
              <div class="item" @click="orderTitle('today')">最新日</div>
              <div class="item" @click="orderTitle('last_week')">近一周</div>
              <div class="item" @click="orderTitle('last_month')">近一月</div>
              <div class="item" @click="orderTitle('last_three_month')">近三月</div>
              <div class="item" @click="orderTitle('year_come')">今年以来</div>
              <div class="item" @click="orderTitle('one_nine')">2019</div>
              <div class="item" @click="orderTitle('one_eight')">2018</div>
            </div>
            <div class="tr" v-for="item in data3" :key="item">
              <div class="item">{{item.code}}</div>
              <div class="item">{{item.name}}</div>
              <div :class="item.today > 0? 'redItem': item.today ==0 ? 'item': 'greenItem'">{{item.today}}%</div>
              <div :class="item.last_week > 0? 'redItem': item.today ==0 ? 'item': 'greenItem'">{{item.last_week}}%</div>
              <div :class="item.last_month > 0? 'redItem': item.today ==0 ? 'item': 'greenItem'">{{item.last_month}}%</div>
              <div :class="item.last_three_month > 0? 'redItem': item.today ==0 ? 'item': 'greenItem'">{{item.last_three_month}}%</div>
              <div :class="item.year_come > 0? 'redItem': item.today ==0 ? 'item': 'greenItem'">{{item.year_come}}%</div>
              <div :class="item.one_nine > 0? 'redItem': item.today ==0 ? 'item': 'greenItem'">{{item.one_nine}}%</div>
              <div :class="item.one_eight > 0? 'redItem': item.today ==0 ? 'item': 'greenItem'">{{item.one_eight}}%</div>
            </div>
          </div>
        </div>
      </div>

      <!-- 常见问题 -->
      <div class="info-list" v-show="tabIndex == 4">
        <div class="table-area">
          <div class="table">
            <div class="tr title">
              <div class="item">指数代码</div>
              <div class="item">指数名称</div>
              <div class="item" @click="orderTitle('pe')">PE</div>
              <div class="item" @click="orderTitle('pe_point')">分数位</div>
              <div class="item" @click="orderTitle('pb')">PB</div>
              <div class="item" @click="orderTitle('pb_point')">分数位</div>
              <div class="item" @click="orderTitle('gu_xi_lv')">股息率</div>
              <div class="item" @click="orderTitle('roe')">ROE</div>
              <div class="item" @click="orderTitle('epsg')">EpsG%</div>
            </div>
            <div class="tr" v-for="item in data4" :key="item">
              <div class="item">{{item.code}}</div>
              <div class="item">{{item.name}}</div>
              <div :class="item.pe > 0? 'redItem': item.today ==0 ? 'item': 'greenItem'">{{item.pe}}</div>
              <div :class="item.pe_point > 0? 'redItem': item.today ==0 ? 'item': 'greenItem'">{{item.pe_point}}%</div>
              <div :class="item.pb > 0? 'redItem': item.today ==0 ? 'item': 'greenItem'">{{item.pb}}</div>
              <div :class="item.pb_point > 0? 'redItem': item.today ==0 ? 'item': 'greenItem'">{{item.pb_point}}%</div>
              <div :class="item.gu_xi_lv > 0? 'redItem': item.today ==0 ? 'item': 'greenItem'">{{item.gu_xi_lv}}%</div>
              <div :class="item.roe > 0? 'redItem': item.today ==0 ? 'item': 'greenItem'">{{item.roe}}%</div>
              <div :class="item.epsg > 0? 'redItem': item.today ==0 ? 'item': 'greenItem'">{{item.epsg}}%</div>
            </div>
          </div>
        </div>
      </div>
    </div>  
  </div>
</template>
<script>
import {getFindList} from '@/utils/model.js';
export default {
  data() {
    return {
      tabIndex: 1, // 第几个选项卡
      data1: [], // 主要指数涨跌幅
      data2: [], // 主要指数估值
      data3: [], // 行业指数涨跌幅
      data4: [], // 行业指数估值
      nowSort: 1,
    }
  },
  methods: {
    getList() {
      getFindList(this.tabIndex)
       .then((res) => {
         if (res.code == 10000) {
           this[`data${this.tabIndex}`] = res.list;
           console.log(this.tabIndex);
         }
       });
    },
    tabSelect(i) {
      this.tabIndex = i;
      if (this[`data${this.tabIndex}`].length == 0) {
        this.getList();
      }
    },
    orderTitle(i) {
      var data = this[`data${this.tabIndex}`];
      // console.log(JSON.stringify(data));
      // data = this[`data${this.tabIndex}`]
      console.log(this.nowSort);
      if(this.nowSort == 1){
        this.nowSort = 2;
        var dataTmp = data.sort((a, b) => {
           return Number(a[i]) - Number(b[i]);
         });
      }else{
          this.nowSort = 1;
          var dataTmp = data.sort((a, b) => {           
           return Number(b[i]) - Number(a[i]);
          });
      }
      console.log(dataTmp);
      this[`data${this.tabIndex}`] = dataTmp;
    }
  },
  onShow() {
    const tabIndex = this.globalData.findTabIndex || 1;
    this.tabSelect(tabIndex);
    // this.tabIndex = tabIndex;
    // console.log(this.tabIndex);
    // // 请求咨询数据
    // this.getList();
  },
  onHide() {
    this.globalData.findTabIndex = this.tabIndex;
  }
}
</script>

<style lang="less" scoped>
.table-area {
  width: 100%;
  background-color: #fff;
  padding:0 10rpx;
  font-size: 26rpx;
  display: block;
  .tab-type {
    font-size: 36rpx;
    color: #999999;
    text-align: center;
    float: left;
    width: 50%;
    &.cur {
      color: #4768f3;
    }
    &.cur:after {
      content: '';
      display: block;
      width: 100rpx;
      height: 4rpx;
      border-radius: 2rpx;
      background-color: #95a7f2;
      position: absolute;
      top: 48rpx;
      left: 50%;
      margin-left: -25rpx;
    }
  }
  .tab {
    font-size: 28rpx;
    color: #999999;
    padding: 10rpx  0rpx 20rpx;
    // position: relative;
    float: left;
    width: 24%;
    text-align: center;

    &.cur {
      color: #4768f3;
    }
    &.cur:after {
      content: '';
      display: block;
      width: 14%;
      height: 4rpx;
      border-radius: 2rpx;
      background-color: #95a7f2;
      position: absolute;
      margin-left: 20px;

      // top: 48rpx;
      // left: 50%;
      // margin-left: -25rpx;
    }
  }
  .tab + .tab {
    border-left: 1rpx solid #999;
  }

  .tr {
    // flex: 1 0 94%;
    display: flex;
    align-items:center;
    justify-content: center;
    .item {
      width: 10%;
      height: 80rpx;
      line-height: 30rpx;
      border: 1rpx solid #dfdfdf;
      border-top: 0;
      border-left: 0;
      word-wrap: break-word;
      // flex: 0 0.1 20%;
      text-align: center;
      vertical-align: middle;
      
    }
    .redItem {
      width: 10%;
      height: 80rpx;
      line-height: 30rpx;
      border: 1rpx solid #dfdfdf;
      border-top: 0;
      border-left: 0;
      word-wrap: break-word;
      // flex: 0 0.1 20%;
      text-align: center;
      vertical-align: middle;
      color: red;
    }
    .greenItem {
      width: 10%;
      height: 80rpx;
      line-height: 30rpx;
      border: 1rpx solid #dfdfdf;
      border-top: 0;
      border-left: 0;
      word-wrap: break-word;
      // flex: 0 0.1 20%;
      text-align: center;
      vertical-align: middle;
      color: green;
    }
    &.title {
      .item {
        // font-weight: bold;
        // font-size: 30rpx;
        height: 80rpx;
        line-height: 30rpx;
        border-top: 1rpx solid #dfdfdf;
      }
    }
  }
}
</style>
